<template>
  <a-modal
    :title="title"
    width="600px"
    :visible="visible"
    @ok="handleOk"
    :confirmLoading="confirmLoading"
    @cancel="handleCancel"
  >
    <a-spin :spinning="confirmLoading">
      <a-form-model ref="stockForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-form-model-item label="股票代码" prop="id">
          <a-input v-model="form.id" :disabled="!isAdd"/>
        </a-form-model-item>
        <a-form-model-item label="股票名称" prop="name">
          <a-input v-model="form.name" :disabled="!isAdd"/>
        </a-form-model-item>
        <a-form-model-item label="申购代码" prop="code">
          <a-input v-model="form.code" :disabled="!isAdd"/>
        </a-form-model-item>
        <a-form-model-item label="发行总数(万股)" prop="totalNum">
          <a-input v-model="form.totalNum"/>
        </a-form-model-item>
        <a-form-model-item label="申购上限(万股)" prop="topNum">
          <a-input v-model="form.topNum"/>
        </a-form-model-item>
        <a-form-model-item label="发行价格" prop="discountPrice">
          <a-input v-model="form.discountPrice"/>
        </a-form-model-item>
        <a-form-model-item label="发行市盈率" prop="fxPercent">
          <a-input v-model="form.fxPercent"/>
        </a-form-model-item>
        <a-form-model-item label="行业市盈率" prop="hyPercent">
          <a-input v-model="form.hyPercent"/>
        </a-form-model-item>
        <a-form-model-item label="最后申购日期" prop="date">
          <a-input v-model="form.date"/>
        </a-form-model-item>
        <a-form-model-item label="中签率%" prop="zqPercent">
          <a-input v-model="form.zqPercent"/>
        </a-form-model-item>
        <a-form-model-item label="中签后缴款日期" prop="lastDate">
          <a-input v-model="form.lastDate"/>
        </a-form-model-item>
        <a-form-model-item label="上市日期" prop="ssDate">
          <a-input v-model="form.ssDate"/>
        </a-form-model-item>
        <a-form-model-item label="涨停数量">
          <a-input v-model="form.count"/>
        </a-form-model-item>
        <a-form-model-item label="模块" prop="mk">
          <a-checkbox-group v-model="form.mk" style="width: 100%;">
            <a-row>
              <a-col :span="6">
                <a-checkbox value="kcbsg" name="mk">科创板</a-checkbox>
              </a-col>
              <a-col :span="6">
                <a-checkbox value="hszb" name="mk">沪深主板</a-checkbox>
              </a-col>
              <a-col :span="6">
                <a-checkbox value="zxb" name="mk">中小板</a-checkbox>
              </a-col>
              <a-col :span="6">
                <a-checkbox value="cyb" name="mk">创业板</a-checkbox>
              </a-col>
            </a-row>
          </a-checkbox-group>
        </a-form-model-item>
        <a-form-model-item label="排序" prop="sort">
          <a-input v-model="form.sort"/>
        </a-form-model-item>
        <a-form-model-item label="是否展示" prop="show">
          <a-radio-group v-model="form.show">
            <a-switch v-model="form.show"/>
          </a-radio-group>
        </a-form-model-item>
        <a-form-model-item label="公司简介">
          <a-input v-model="form.company" type="textarea"/>
        </a-form-model-item>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>

<script>
  import { stockInfo, addStock, updateStock } from '@/api/stock'
  import { errorHandler, successHandler } from '../../../utils/request'

  export default {
    name: 'StockModal',
    data () {
      return {
        isAdd: true,
        visible: false,
        title: '股票信息',
        confirmLoading: false,
        labelCol: { span: 6 },
        wrapperCol: { span: 17 },
        form: {
          id: '',
          name: '',
          code: '',
          totalNum: 0,
          topNum: 0,
          price: 0,
          fxPercent: 0,
          hyPercent: 0,
          date: undefined,
          zqPercent: 0,
          lastDate: undefined,
          ssDate: undefined,
          count: 0,
          sort: undefined,
          mk: [],
          show: false,
          discountPrice: 0,
          company: ''
        },
        rules: {
          id: [{ required: true, message: '请输入股票代码', trigger: 'blur' }],
          name: [{ required: true, message: '请输入股票名称', trigger: 'blur' }],
          code: [{ required: true, message: '请输入申购代码', trigger: 'blur' }],
          totalNum: [{ required: true, message: '请输入发行总数(万股)', trigger: 'blur' }],
          topNum: [{ required: true, message: '请输入申购上限(万股)', trigger: 'blur' }],
          discountPrice: [{ required: true, message: '请输入发行价格', trigger: 'blur' }],
          fxPercent: [{ required: true, message: '请输入发行市盈率', trigger: 'blur' }],
          hyPercent: [{ required: true, message: '请输入行业市盈率', trigger: 'blur' }],
          date: [{ required: true, message: '请输入最后申购日期', trigger: 'blur' }],
          zqPercent: [{ required: true, message: '请输入中签率%', trigger: 'blur' }],
          lastDate: [{ required: true, message: '请输入中签后缴款日期', trigger: 'blur' }],
          ssDate: [{ required: true, message: '请输入上市日期', trigger: 'blur' }],
          sort: [{ required: true, message: '请输入排序', trigger: 'blur' }],
          mk: [{ type: 'array', required: true, message: '请选择模块', trigger: 'change' }]
        }
      }
    },
    methods: {
      add () {
        this.title = '新增股票信息'
        this.isAdd = true
        this.visible = true
        this.form = {}
      },
      edit (record) {
        this.title = '修改股票信息'
        this.isAdd = false
        this.visible = true
        stockInfo({ id: record.id }).then(res => {
          console.log(res)
          this.form = res.data
        }).catch(err => {
          console.log('something error', err)
        })
      },
      handleOk (e) {
        this.confirmLoading = true
        this.$refs.stockForm.validate(valid => {
          if (valid) {
            // todo 需要调用 edit接口 或 add接口
            console.log('是否是新建: ', this.isAdd ? '是' : '否')
            const params = this.form
            params['price'] = params['discountPrice']
            if (this.isAdd) {
              console.log('新增股票信息')
              addStock(params).then(res => {
                console.log(res)
                successHandler(res)
                this.visible = false
                this.confirmLoading = false
                this.$emit('updateTable')
              }).catch(err => {
                this.confirmLoading = false
                errorHandler(err)
              })
            } else {
              console.log('修改股票信息')
              updateStock(params).then(res => {
                console.log(res)
                successHandler(res)
                this.visible = false
                this.confirmLoading = false
                this.$emit('updateTable')
              }).catch(err => {
                this.confirmLoading = false
                errorHandler(err)
              })
            }
          } else {
            console.log('检查信息为不通过')
            this.confirmLoading = false
            return false
          }
        })
      },
      handleCancel (e) {
        console.log('Clicked cancel button')
        this.visible = false
      }
    }
  }
</script>

<style scoped>

</style>
